<template>
  <TagList
    :dataList="tagList"
    v-show="values"
    :type="dto"
    @hangdler-delete="open"
    @handler-update="open"
    @remove="open"
    @update="open"
    @add-item="open"
  ></TagList>
  <ConfirmDialog ref="confirm" @handler-confirm="confirmEvent"></ConfirmDialog>
</template>

<script setup>
import TagList from '@/components/TagList.vue'
import request from '@/util/request'
import { ElMessage, ElNotification } from 'element-plus'
import { onMounted, ref } from 'vue'
import ConfirmDialog from '@/components/ConfirmDialog.vue'

const tagList = ref([])

const values = ref(false)
const dto = ref({
  id: 1
})

const confirm = ref()

const getList = () => {
  request
    .get('/admin/tag/list')
    .then((res) => {
      console.log('获取的数据', res)
      tagList.value = res.data
      values.value = true
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const batchDelete = (ids) => {
  console.log('批山---', ids)

  if (ids === null || ids.length <= 0) {
    ElMessage.warning('你都没有选择，你点什么玩意')
    return
  }
  request
    .post('/admin/tag/batch-delete', ids)
    .then((res) => {
      if (res.code !== 200) {
        console.log('================', res)
        ElMessage.error('删除失败--->' + res.msg)
        return
      } else {
        console.log('删除成功', res)
        ElMessage.success('删除成功')
        getList()
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const batchUpdate = (ids, names) => {
  console.log(ids, names)
  if (ids.value === null || ids.length <= 0) {
    ElMessage.warning('你都没有选择，你点什么玩意')
    return
  }

  var datas = null
  if (names !== null) {
    datas = names.split(',')
  }
  console.log('data--', datas, ids)

  request
    .post('/admin/tag/batch-update', { ids: ids, names: datas })
    .then((res) => {
      console.log('修改成功', res)

      if (res.code !== 200) {
        console.log('================', res)
        ElMessage.error('修改失败--->' + res.msg)
        return
      } else {
        getList()
        ElMessage.success('修改成功')
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const remove = (item) => {
  console.log('remove', item)

  if (item.id === null) {
    ElMessage.warning('你都没有选择，你点什么玩意')
    return
  }
  request
    .get(`/admin/tag/delete?id=${item.id}`)
    .then((res) => {
      if (res.code != 200) {
        ElMessage.error('删除失败--->', res.msg)
        return
      }
      getList()
      console.log('删除成功', res)
      ElMessage.success('删除成功')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const update = (item) => {
  console.log('update', item)
  if (item.id === null || item.name === '') {
    ElMessage.warning('你再看看，是不是差点什么')
    return
  }

  request
    .get(`/admin/tag/update?id=${item.id}&tagName=${item.name}`)
    .then((res) => {
      if (res.code != 200) {
        ElMessage.error('修改失败--->', res.msg)
        return
      }
      console.log('修改成功', res)
      ElMessage.success('修改成功')
      getList()
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const addType = (item) => {
  console.log('添加的数据时', item)
  request
    .get(`/admin/tag/add?names=${item}`)
    .then((res) => {
      console.log('新增完成', res)
      if (res.code !== 200) {
        console.log('================', res)
        ElMessage.error('新增失败--->' + res.msg)
        return
      } else {
        getList()
        if (res.data != null) {
          ElMessage.success('新增成功,但是这些已经存在---->' + res.data)
        } else {
          ElMessage.success('新增成功')
        }
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const open = (item) => {
  confirm.value.open(item)
}

const confirmEvent = (item) => {
  const newItem = item.data.data
  console.log('-------', newItem)

  if (item.type === 1) {
    console.log('add-item----', item.data)
    addType(newItem)
  } else if (item.type === 2) {
    console.log('update----', item.data)
    update(newItem.value1)
  } else if (item.type === 3) {
    console.log('remove----', item.data)
    remove(newItem.value1)
  } else if (item.type === 4) {
    console.log('handler-update----', item.data)
    batchUpdate(newItem.value1, newItem.value2)
  } else if (item.type === 5) {
    console.log('hangdler-delete----', newItem.value1)
    batchDelete(newItem.value1)
  }
}

onMounted(() => {
  getList()
})
</script>

<style></style>
